<script setup>
import { ref } from 'vue'
import axios from 'axios'
const openClose = ref(false)
const connect = ref(false)
const bmshightvol = ref()
const yggl = ref()
const wggl = ref()

const props = defineProps({
    Sval: {
        type: Object
    },
    Cval: {
        type: Object
    }
}
)


function handleSwitch(value,num) {
  var  type =""
    switch(num){
        case 1:
            console.log("开关",openClose.value,props.Sval,props.Cval)
            type = "开关"
            break
        case 2:
        console.log('并网',connect.value)
        type = "并网"
            break
        case 3:
        console.log('上高压',bmshightvol.value)
        type = "上高压"
            break
        default:
            break
    }

    axios.post('/api/station/set',{
        Sval:props.Sval,
        Cval:props.Cval,
        Type:type,
        Option:value,

    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}


function elBtEvnet(event,num) {
    var  type =""
    var value 
    switch(num){
        case 1:
            console.log("有功功率设置",yggl.value)
            type = "有功功率设置"
            value = yggl.value
            break
        case 2:
            console.log("无功功率设置",wggl.value)
            type = "无功功率设置"
            value = wggl.value
            break
        case 3:
            console.log("bms复位")
            type = "bms复位"
            break
        case 4:
            console.log("pcs复位")
            type = "pcs复位"
            break
        default:
            break
    }
    axios.post('/api/station/set',{
        Sval:props.Sval,
        Cval:props.Cval,
        Type:type,
        value:value,
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })  
}   

</script>

<template>
    <div class="ctrlset">
        <el-switch v-model="openClose" active-text="开机" inactive-text="关机" size="large" class="switch" @change="handleSwitch($event,1)" />
        <el-switch v-model="connect" active-text="并网" inactive-text="离网" size="large" class="switch" @change="handleSwitch($event,2)" />
        <el-switch v-model="bmshightvol" active-text="bms上高压" inactive-text="bms下高压" size="large" class="switch" @change="handleSwitch($event,3)"/> 
     
    
        <div class="elset">
            <el-tag type="info"  class="eltag">有功功率：</el-tag>
            <el-input v-model="yggl" style="width: 240px" placeholder="Please input" clearable></el-input>
            <el-button type="primary" style="margin-left: 10px;" @click="elBtEvnet($event,1)">有功功率设置</el-button>
        </div>
        <div class="elset">
            <el-tag type="info" class="eltag">无功功率：</el-tag>
            <el-input v-model="wggl" style="width: 240px" placeholder="Please input" clearable></el-input>
            <el-button type="primary" style="margin-left: 10px;" @click="elBtEvnet($event,2)">无功功率设置</el-button>
        </div>
        <div class="elbutton">
            <el-button type="primary"  @click="elBtEvnet($event,3)">bms复位</el-button>
            <el-button type="primary"  @click="elBtEvnet($event,4)">pcs复位</el-button>
        </div>
    </div>
</template>

<style scoped>

.ctrlset{
    margin: auto;
    width: 50%
}

.elbutton{
    margin: auto;
    width: 50%
}

.switch{
    margin: 20px;
}

.elset{
    margin: 10px;
    display: flex;
    align-items: center;
}

.eltag{
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

</style>
